<template>
  <el-collapse v-model="activeName" accordion>
    <el-collapse-item name="1">
      <template #title>
        <div style="text-align: right">参数</div>
      </template>
      <div class="box">
        <el-table :data="[table]" v-show="editable" style="width: 100%">
          <el-table-column prop="maxLength" label="最大长度"/>
          <el-table-column prop="temperature" label="temperature"/>
          <el-table-column prop="topK" label="top k"/>
          <el-table-column prop="topP" label="topP"/>
          <el-table-column label="">
            <template #default="scope">
              <el-button type="primary" class="button" @click="onEditClick" v-show="!editing">修改</el-button>
              <el-button type="primary" class="button" @click="submit" v-show="editing">确定</el-button>
              <el-button type="primary" class="button" @click="editing=false" v-show="editing">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="[table]" v-show="!editable" style="width: 100%">
          <el-table-column prop="maxLength" label="最大长度"/>
          <el-table-column prop="temperature" label="temperature"/>
          <el-table-column prop="topK" label="top k"/>
          <el-table-column prop="topP" label="topP"/>
        </el-table>
        <!--suppress HtmlUnknownTag -->
        <transition name="el-zoom-in-top">
          <el-form
              :model="parametersForm"
              :rules="rules" ref="form"
              label-width="100px"
              style="margin-top: 20px"
              class="form"
              size="medium"
              inline
              v-show="editing"
          >
            <el-form-item label="最大长度" prop="maxLength" required>
              <el-input v-model="parametersForm.maxLength"/>
            </el-form-item>
            <el-form-item label="temperature" prop="temperature" required>
              <el-input v-model="parametersForm.temperature"/>
            </el-form-item>
            <el-form-item label="top k" prop="topK" required>
              <el-input v-model="parametersForm.topK"/>
            </el-form-item>
            <el-form-item label="top p" prop="topP" required>
              <el-input v-model="parametersForm.topP"/>
            </el-form-item>
          </el-form>
        </transition>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>

export default {
  name: "GenerateParameterSetter",
  data() {
    return {
      activeName: '',
      table: {
        maxLength: 256,
        temperature: 1.0,
        topK: 40,
        topP: 1,
      },
      parametersForm: {
        maxLength: 256,
        temperature: 1.0,
        topK: 40,
        topP: 1,
      },
      editing: false,
      rules: {
        maxLength: [
          {
            required: true,
            message: '生成文本的最大长度不能为空',
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              value = Number(value)
              if (!Number.isInteger(value)) {
                callback(new Error('top k 必须是整数'))
              } else {
                if (value <= 0 || value > 1000) {
                  callback(new Error('最大长度必须大于0小于等于1000'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ],
        topK: [
          {
            required: true,
            message: 'top k不能为空',
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              value = Number(value)
              if (!Number.isInteger(value)) {
                callback(new Error('top k 必须是整数'))
              } else {
                if (value <= 0) {
                  callback(new Error('top k必须大于0'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ],
        topP: [
          {
            required: true,
            message: 'top p不能为空',
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              value = Number(value)
              if (Number.isNaN(value)) {
                callback(new Error('top p 必须是数'))
              } else {
                if (value <= 0.0 || value > 1) {
                  callback(new Error('top p 必须大于0，小于等于1'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ],
        temperature: [
          {
            required: true,
            message: 'temperature不能为空',
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              value = Number(value)
              console.log(value)
              console.log(typeof value)
              if (Number.isNaN(value)) {
                callback(new Error('temperature 必须是数'))
              } else {
                if (value <= 0.0) {
                  callback(new Error('temperature 必须大于0'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ],
      }
    }
  },
  props: {
    editable: {
      default: false,
      type: Boolean
    }
  },
  methods: {
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.table.maxLength = this.parametersForm.maxLength
          this.table.temperature = this.parametersForm.temperature
          this.table.topK = this.parametersForm.topK
          this.table.topP = this.parametersForm.topP
          this.editing = false
        } else {
          return false;
        }
      });
    },
    onEditClick() {
      console.log(this.editable)
      this.parametersForm.maxLength = this.table.maxLength
      this.parametersForm.temperature = this.table.temperature
      this.parametersForm.topK = this.table.topK
      this.parametersForm.topP = this.table.topP
      this.editing = true
    },
  },
}
</script>

<style scoped>

.box {
  width: 100%;
  text-align: left;
  margin-top: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  padding: 10px;
}

.button {
  margin-left: 20px;
}

</style>